<template>
    <div>
        <h1>孙子组件</h1>
        <h2>{{info}}</h2>
    </div>
</template>

<script lang="ts">
import { defineComponent,inject,Ref, } from 'vue'

export default defineComponent({
    setup () {
        // vue3在内部封装inject，不是咱们写的函数   inject<T,K>(){}
        // inject是咱们进行调用
        // 当使用时传入数据类型，不传入默认unknown

        // 当前传入的是ref对象，ref对象当中的value是string类型
        const info=inject<Ref<string>>('info')
        // console.log(info) 这是TypeScript没有定义数据类型，unknown   。
        // ref对象在setup当中操作，一定是xx.value,在template模板当中直接使用即可，实际上再template模板当中inValue，它相当于setup当中的inValue.valule
        console.log(info); //ref对象
        console.log(info?.value); //Object is possibly 'undefined'  可有可无  可选的
        const num=inject<Ref<number>>('num')
        console.log(num?.value)
        
        // 传递的是对象类型  通过接口定义数据类型
        interface inObj{
            name:string,
            age:number
        }
        const obj=inject<inObj>('obj')
        console.log(obj)
        console.log(obj?.name)
        // 总而言之 provide传递给子级组件的值 不建议更改
        return {
            info
        }
    }
})
</script>

<style scoped>

</style>